<template>
  <div id="container" tabindex="0"></div>
  <!--<div class="seachs">
    <input class="inps" type="text" />
    <span>搜索</span>
  </div>-->
</template>

<script>
import { shallowRef } from "@vue/reactivity";
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  setup() {
    const map = shallowRef(null);
    return {
      map,
    };
  },
  data() {
    return {};
  },
  mounted() {
    this.loacMap();
  },
  methods: {
    loacMap() {
      AMapLoader.load({
        //首次调用 load
        key: "2665f356c6dedefa46cd87576c844e25", //首次load key为必填
        version: "2.0",
        plugins: [
          "AMap.Autocomplete",
          "AMap.PlaceSearch",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.ToolBar",
          "AMap.ElasticMarker",
          "AMap.MapType",
          "AMap.HawkEye",
          "AMap.PolyEditor",
          "AMap.CircleEditor",
          "AMap.Driving",
          "AMap.Geolocation",
        ],
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 16, //初始化地图级别
            center: [108.25374, 27.93847], //初始化地图中心点位置
          });


            AMap.service('AMap.DistrictSearch',function(){//回调函数

         var opts = {
            subdistrict: 1,   //返回下一级行政区
            level: 'city',//查询的范围
            showbiz:false  //查询行政级别为 市
        };
        //实例化DistrictSearch
        districtSearch = new AMap.DistrictSearch(opts);
        //TODO: 使用districtSearch对象调用行政区查询的功能
        districtSearch.search('中国',function(status, result){
            //TODO : 按照自己需求处理查询结果
            console.log(result);
        })
     })
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
.seachs {
  display: flex;
  align-items: center;
  position: fixed;
  top: 140px;
  right: 20px;
  border: 2px solid #666;
  border-radius: 8px;
  span{
    display: inline-block;
    width: 80px;
    line-height: 30px;
    text-align: center;
    background-color: #ccc;
    color: #fff;
  }
   .inps{
      width: 250px;
      height: 30px;
      border: 0px;
      outline:none;
      text-indent: 1em;
    }
}
</style>